<template>
    <view class="cart-item-product" :class="{ oneSpec: getAppSet().isOneSpec }">
        <label class="item-radio" v-if="isShowCheckBox" @click="change(isSelect)">
            <custom-checkbox :isSelect="isSelect"></custom-checkbox>
        </label>
        <easy-pro-img customSize="120" :url="easyGetImgUrl(productInfo.ProductImage)"></easy-pro-img>
        <text class="item-name">{{ productInfo.ProductName }}</text>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
import easyProImg from "@/components/easy/easy-pro-image.vue"
export default {
    components: {
        customCheckbox,
        easyProImg,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        productInfo: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            isSelect: false,
            subIds: [],
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
    },
    mounted() {
        this.isSelectFn(this.selectData)
    },
    methods: {
        change(isSelect) {
            let obj = {
                isSelect: !isSelect,
                proId: this.productInfo.ProductId,
                subIds: this.subIds,
            }
            this.$emit("changeCheck", obj)
        },
        getIsSelect(is) {
            return is
        },
        isSelectFn(data) {
            if (this.productInfo.SubItems) {
                let ids = data.ids

                let subIds = []
                this.productInfo.SubItems.forEach((e) => {
                    subIds.push(String(e.ID))
                })
                this.subIds = subIds
                let newList = []
                subIds.filter((val) => {
                    if (ids.includes(String(val))) {
                        newList.push(val)
                    }
                })
                this.isSelect = newList.length > 0 && newList.length == subIds.length
            }
        },
    },
}
</script>

<style lang="scss">
.cart-item-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;

    .item-radio {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-img {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
    }

    .item-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-weight: 700;
        font-size: $font-size-30;
    }
}
.oneSpec {
    border-bottom: none;
    padding: $app-page-padding 0 10rpx;

    .item-radio {
        margin-right: 36rpx;
        margin-left: 12rpx;
    }
}
</style>
